<!-- Student_studyHistoryList.html -->
<!-- 历史课程列表 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>历史课程</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" href="../../css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/weui.min.css" />
		<link rel="stylesheet" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			.test_cell {
				width: 100px;
			}
			.test_cell_title {
				font-size: 14px;
				height: 20px;
			}
			/*一行显示,多余省略号*/
			.text_ellipsis {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			p {
				margin-bottom: 0;
			}
			span {
				font-size: 12px;
				margin-right: 14px;
				/*margin-top: 20px;*/
			}
			/*绿色*/
			.green {
				color: #18b4ed;
				/*color:#f57d3b;*/
			}
			.orange {
				color: #f57d3b;
			}
			.schedule, .schedulesymbol {
				color: #323232;
			}
			.schedulecount {
				color: #e5072f;
			}
			/*
			 */
			.p_padding {
				padding-top: 8px;
				padding-bottom: 8px;
			}
			#courseInfo {
				background-color: #48baff;
				overflow: hidden;
				padding: 10px;
			}
			#imageContainer {
				float: left;
				margin: 0;
				width: 40%;
				height: 120px;
				display: -webkit-flex;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: white;
				overflow: hidden;
			}
			#titleContainer {
				float: right;
				width: 60%;
			}
			.cell_icon {
				margin-right: 4px;
				max-width: 12px;
			}
			#sourcefen {
				color: #0782e4;
			}
			.weui_panel {
				margin-top: 0;
			}
			.mui-table-view-cell>a:not(.mui-btn){
				padding: 10px;
			}
			.mui-table-view-cell>a:not(.mui-btn) img{
				max-width: 136px;
				height: 84px;
			}
			.mui-table-view-cell .top-content{
				height: 44px;
			}
			.mui-table-view-cell .bottom-content{
				height: 40px;
			}
			.mui-table-view-cell>a:not(.mui-btn) .course_title{
				overflow: hidden;
			 	text-overflow: ellipsis;
			 	white-space: pre-wrap;
			 	display: -webkit-box;
			 	-webkit-line-clamp: 2;
			 	-webkit-box-orient: vertical;
			 	font-size: 16px;
			 	color: #3e3e3e;
			 	line-height: 1.2em;
			}
			.mui-table-view-cell>a:not(.mui-btn) .subtitle{
				color: #535353;
				line-height: 22px;
			}
			.subtitle-red{
				color: #e10d20;
				font-size: 12px;
				margin: 0;
			}
			.cell-btn{
				width: 70px;
				height: 26px;
				padding: 0;
				background-color: #18b4ed;
				border-color: #18b4ed;
				color: white;
				float: right;
			}
			.small-title{
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<div class="noSign" hidden="hidden" id="noData">
			<img src="../../image/icon_img.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				暂无数据
			</p>
		</div>
		<div class="loadFailure" hidden="hidden" id="noNet">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button" class="mui-btn mui-btn-outlined" onclick="loadNewData()">
				重新加载
			</button>
		</div>
		<div class="weui_panel weui_panel_access">
			<!-- <div class="weui_panel_bd"></div> -->
			<ul id="course_list" class="mui-table-view">
				<!-- <li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../../image/list-default.png">
						<div class="mui-media-body top-content">
							<p class="course_title">MOOC课程家职业资格高级物流师培训班的通知</p>
						</div>
						<div class="mui-media-body bottom-content">
							<p class='mui-ellipsis subtitle'>MOOC课程</p>
							<p class='mui-ellipsis subtitle small-title'>已学习<span class="subtitle-red">2</span>/12</p>
						</div>
					</a>
				</li> -->
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/utils.js"></script>
	<script type="text/javascript" src="../../script/databaseOperation.js" ></script>
	<script type="text/javascript">
		var page = 1;
		var pagerows = 10;
		var limitStart = 0;
		var limitCount = 10;
		var uid = '';
		var jid = '';
		var newCount = 0;
		//新请求到的数据条数
		// $api.getStorage('cfnetppuid')
		DBReady = function() {
			prepareData();
			setupNotifi();
			loadNewData();
			setRefreshHeader();
			setPullUpRefresh();
		}
		function prepareData() {
			uid = $api.getStorage('cfnetppuid');
			jid = $api.getStorage('cfnetppjxid');
		}

		function setupNotifi() {
			api.addEventListener({
				name : 'studyPassedExamNotifi'
			}, function(ret, err) {
				// alert('历史课程列表:'+JSON.stringify(ret));
				if (ret.value.isthrough == 1) {
					loadNewData();
				}
			});
			api.addEventListener({
				name : 'finishStudy'
			}, function(ret, err) {
				loadNewData();
			});
			//添加切换集团通知
			api.addEventListener({
			    name: 'changeJidNotifi'
			}, function(ret, err) {
				prepareData();//刷新集团数据
			    loadNewData();
			});
		}

		//是否存在缓存
		function iscache() {
			if (page > 0) {
				limitStart = (page - 1) * limitCount;
			}
			openDB(function(ret, err) {
				if (ret.status) {
					var sql = "SELECT * FROM t_study_course   WHERE  ctype = 3 and uid = " + uid + " and jid=" + "'" + jid + "'" + "  LIMIT  " + limitStart + ", " + limitCount + ";";
					// 从数据库中查询数据(表名，页数，行数)
					selectSQL(sql, function(ret, err) {
						if (ret.status) {
							var data = ret.data;
							var length = data.length;
							newCount = length;
							if (length > 0) {
								setdata(length, data);
							} else {
								// if(api.connectionType=='none'){
								if (page == 1) {
									$('.noSign').hide();
									$('.loadFailure').show();
									$('#course_list').html('');
								} else {
									api.toast({
										msg : '网络异常，请检查网络',
										duration : 2000,
										location : 'bottom'
									});
								}
								// }else{
								// 	// loadCourseData();
								// }
							}
						} else {
							// if(api.connectionType=='none'){
							if (page == 1) {
								$('.noSign').hide();
								$('.loadFailure').show();
								$('#course_list').html('');
							} else {
								api.toast({
									msg : '网络异常，请检查网络',
									duration : 2000,
									location : 'bottom'
								});
							}
							// }else{
							// 	// loadCourseData();
							// }
						}
					});
				}
			});
		}

		function loadCourseData() {
			// api.showProgress({
			// 	style : 'default',
			// 	animationType : 'fade',
			// 	title : '加载中...',
			// 	modal : false
			// });
			var params = {
				values : {
					uid : uid,
					jid : jid,
					page : page,
					pagerows : pagerows
				}
			};
			api.ajax({
				url : url_getHistoryCourseList,
				data : params,
				method : 'post',
			}, function(ret, err) {
				api.refreshHeaderLoadDone();
				// api.hideProgress();
				// alert('url:'+url_getHistoryCourseList+'\n'+JSON.stringify(params));
				if (ret) {
					if (ret.code == 200) {
						var data = ret.data.list;
						if (data != null && data.constructor == Array && data.length > 0) {
							var length = data.length
							newCount = length;
							setdata(length, data);
							insertDatadb(length, data);
						} else {
							if (page == 1) {
								$('#course_list').html("");
								$('.noSign').show();
								$('.loadFailure').hide();
							}
						}
					} else {
						if (page == 1) {
							$('#course_list').html("");
							$('.noSign').show();
							$('.loadFailure').hide();
						}
					}
				} else {
					iscache();
					api.toast({
						msg : '网络异常，请检查网络',
						duration : 2000,
						location : 'bottom'
					});
				}
			});
		}

		//添加数据
		function setdata(length, data) {
			var courses = "";
			$('.noSign').hide();
			$('.loadFailure').hide();
			for (var i = 0; i < length; i++) {
				var imageUrl = data[i].coverimages;
				var patt1 = new RegExp("http://");
				if (!patt1.test(imageUrl)) {
					imageUrl = 'http://cfnet.org.cn/data/uploads/' + imageUrl;
				}
				var title = data[i].coursename;
				var str = data[i].cjd;
				//		var sarr = str.split('%');
				//		 var schedule = sarr[0];//进度
				var comment = data[i].commentcount;
				var records = data[i].viewcount;
				var selectPrompt = "";
				var sourcefen = "";
				//考核
				var selected = 1;
				//课程类型
				var cstatus = data[i].cstatus;
				var isrequired = '选修课';
				if (cstatus == 0) {
					isrequired = '必修课';
				}
				var courseScore = data[i].examscore;
				if (courseScore == '') {
					courseScore = 0;
				}
				var passmark = data[i].passmark;
				if (passmark == '') {
					passmark = 0;
				}
				if (data[i].haveexam == 1) {
					sourcefen = "考核成绩：" + parseInt(courseScore) + "&nbsp通过分数：" + parseInt(passmark);
				} else {
					sourcefen = "无考核";
				}
				var ClassCourse = "";
				ClassCourse = "<span class='orange'>" + isrequired + "</span>" + "<span class='schedule'>进度:<span class='schedulecount'>" + str + "<span class='schedulesymbol'>%</span></span></span>";
				// var course = "<a class='weui_media_box weui_media_appmsg' id='" + data[i].courseid + "' courseid='" + data[i].courseid + "' selectedstatus='" + selected + "' cstatus='" + cstatus + "' planid='" + data[i].planid + "' source='" + data[i].source + "' part='" + data[i].part + "'>" + "<div class='weui_media_hd test_cell' style='width:100px;'>" +
				// // sourceTab +
				// "<img class='weui_media_appmsg_thumb' src='" + imageUrl + "' alt=''>" + "</div>" + "<div class='weui_media_bd'>" + "<p class='test_cell_title text_ellipsis base_title_color'>" + title + "</p>" + "<p class='weui_media_desc p_padding'>" + ClassCourse + "</p>" + "<p class='weui_media_desc'>" + "<span class='text_ellipsis' id='sourcefen'>" + sourcefen + "</span>" + "</p>" + "</div>" + selectPrompt + "</a>";
				var courseData = data[i];
				var coursetypeName = "MOOC课程";
				var courseJinDu = '<p class="mui-ellipsis subtitle small-title">已学习<span class="course_schedule">100%</span></p>';
				if (courseData.contenttype == 2108) {//自由课程
					coursetypeName = "自由课程";
				}
				var course = '<li id="' + courseData.courseid + '" title="' + title + '" courseid="' + courseData.courseid + '" selectedstatus="' + selected + '" cstatus="' + cstatus + '" planid="' + courseData.planid + '" source="' + courseData.source + '" part="' + courseData.part + '" crid="' + courseData.crid + '" examid="' + courseData.examid + '" coursetype="' + courseData.coursetype + '" class="mui-table-view-cell mui-media weui_media_appmsg">'+
					'<a href="javascript:;">'+
						'<img class="mui-media-object mui-pull-left" src="'+imageUrl+'">'+
						'<div class="mui-media-body top-content">'+
							'<p class="course_title">'+
								title+
							'</p>'+
						'</div>'+
						'<div class="mui-media-body bottom-content">'+
							'<p class="mui-ellipsis subtitle">'+coursetypeName+'</p>'+
							courseJinDu+
						'</div>'+
					'</a>'+
				'</li>';
				courses = courses + course;
			}
			if (page == 1) {//下拉刷新
				$('#course_list').html(courses);
			} else {//上拉加载
				$('#course_list').append(courses);
			}
			$('.weui_media_appmsg').click(function() {
				var imgurl = $(this).find('div img:first').attr('src');
				var title = $(this).attr('titls');
				var planid = $(this).attr('planid');
				var courseid = $(this).attr('courseid');
				var cstatus = $(this).attr('cstatus');
				var source = $(this).attr('source');
				var part = $(this).attr('part');
				var crid = $(this).attr('crid');
				var examid = $(this).attr('examid');
				var coursetype = $(this).attr('coursetype');
				var pageName = '';
				var pageUrl = '';
				if (coursetype == 2108) {//自由课程
					pageName = 'Student_FreeCourseTab';
					pageUrl = 'Student_FreeCourseTab.html';
				} else if (coursetype == 2109) {//慕课
					pageName = 'studyCourseDetail';
					pageUrl = 'studyCourseDetail.html';
				} else {
					return;
				}
				api.openWin({useWKWebView:true,
					name : pageName,
					url : pageUrl,
					bgColor : '#fff',
					vScrollBarEnabled : false,
					hScrollBarEnabled : false,
					pageParam : {
						imgurl : imgurl,
						title : title,
						courseType : pageParam.courseType,
						planid : planid,
						courseid : courseid,
						cstatus : cstatus,
						selected : 1,
						source : source,
						part : part,
						crid : crid,
						examid : examid
					}
				});
				// api.openWin({useWKWebView:true,
				// 	name : 'studyCourseDetail',
				// 	url : 'studyCourseDetail.html',
				// 	bgColor : '#fff',
				// 	vScrollBarEnabled : false,
				// 	hScrollBarEnabled : false,
				// 	pageParam : {
				// 		imgurl : imgurl,
				// 		title : title,
				// 		courseType : "1",
				// 		planid : planid,
				// 		courseid : courseid,
				// 		//				cstatus : 0,
				// 		selected : 1,
				// 		cstatus : cstatus,
				// 		source : source,
				// 		part : part
				// 	}
				// });
			});
		}

		//插入数据
		function insertDatadb(length, data) {
			openDB(function(ret, err) {
				if (ret.status) {
					var j = 0;
					for (var i = 0; i < length; i++) {
						var course = data[i];
						var coursesListParam = {
							source : course.source, //来源 0:自有课程;1:公共课程
							isCollect : course.isCollect,
							courseid : course.courseid,
							planid : course.planid,
							cstatus : course.cstatus,
							coursename : course.coursename,
							coverimages : course.coverimages,
							// score : course.score,
							viewcount : course.viewcount,
							commentcount : course.commentcount,
							cjd : course.cjd,
							part : course.part,
							ctype : "3",
							selected : 1,
							uid : uid,
							jid : jid,
							uniquekey : course.courseid + uid,
							haveexam : course.haveexam,
							passmark : course.passmark,
							examscore : course.examscore,
							examid : course.examid
						}
						insertData('t_study_course', coursesListParam, function(ret, err) {
							j++;
							if (j == length) {
							}
						});
					}
				}
			});
		}

		function loadNewData() {
			page = 1;
			loadCourseData();
		}

		//下拉刷新
		function setRefreshHeader() {
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				page = 1;
				loadCourseData();
			});
		}

		// 上拉加载
		function setPullUpRefresh() {
			api.addEventListener({
				name : 'scrolltobottom'
			}, function(ret, err) {
				if (newCount == pagerows) {
					page++;
					loadCourseData();
				}
			});
		}
	</script>
</html>
